<template>
  <!-- 柱状图组件 -->
  <div id="main" ref="barEchart" class="barEchart" />
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'Linechart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
    //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.barEchart)
      //   绘制图标
      myChart.setOption({
        //    区域缩放
        dataZoom: [
          {
            //   指明作用的哪一个轴
            xAxisIndex: 0,
            type: 'slider' // 柱状图底部出现滑块
            // type: 'inside' // 鼠标滚轮滑动动柱状图左右切换 或者双指切换
          },
          {
            //   指明作用的哪一个轴
            yAxisIndex: 0,
            start: 0, // 开始
            end: 80, // 结束
            type: 'slider' // 柱状图底部出现滑块
            // type: 'inside' // 鼠标滚轮滑动动柱状图左右切换 或者双指切换
          }
        ],
        grid: { // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        //   show: true, // 显示直角坐标系的
        //   borderWidth: 10,
        //   borderColor: 'red'
        },
        xAxis: {
          type: 'category',
          data: ['星期一', '星期二', '星期三', '星期四', '星期无', '星期六', '星期日']
          //   指定x轴的位置
        //   position: 'top'
        },
        yAxis: {
          type: 'value'
          //   指定y轴的位置
        //   position: 'right'
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            restore: {}, // 还原
            // dataZoom: {}, // 区域缩放
            magicType: {
              type: ['bar', 'line']
            }//

          }
        },
        legend: {
          data: ['语文']
        },
        series: [
          {
            name: '语文',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            markPoint: {
              data: [// 标记最大值 最小值
                {
                  type: 'max', name: '最大值'
                }, {
                  type: 'min', name: '最小值'
                }
              ]
            },
            // 平均值
            markLine: {
              data: [
                {
                  type: 'average', name: '平均值'
                }
              ],
              symbol: 'none' // 去掉虚线的箭头
            },
            //  显示柱子上的数值
            label: {
              show: true,
              rotate: 60, // 文字旋转60度
              //   position: 'inside'  // 默认显示值
              position: 'top' // 显示在柱子的上面
            },

            barWidth: '30', // 柱子宽度
            itemStyle: { // 柱子样式
              normal: {
                barBorderRadius: [10, 10, 10, 10] // 设置壮壮图的上下左右的圆角圆角
              },

              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 渐变色
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          }
        ]
      })
    }
  }
}
</script>

